

$basecolor: #ea4c88;
$usergreenbtn: #8aba56;

@function remp($canshu){
	@return ($canshu / 64px) * 1rem;
}


@mixin htmlremp($canshu,$canshu2,$shuzhi){
	@at-root html[data-dpr="1"] #{$canshu} #{$canshu2}{
		font-size:($shuzhi/2) !important;
	}

	@at-root html[data-dpr="3"] #{$canshu} #{$canshu2}{
		font-size:($shuzhi*1.5) !important;
	}
}

@mixin imgremp(){
	background-image: url(../img/yidong/img.png);
	background-repeat: no-repeat;
	background-size: remp(445px) remp(185px);
}

.container{
	// max-width: 750px;
	// margin: 0 auto;
	overflow-x: hidden;
	overflow-y: auto;
}

.navpart{
	height: remp(85px);
	background: $basecolor;
	position: relative;
}

.navpart-left{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: remp(90px);
	text-align: center;
}
.navpart-left a{
	display: block;
	height: 100%;
	@include imgremp;
	background-position: remp(-178px) remp(25px);
}
.navpart-mid{
	text-align: center;
	line-height: remp(85px);
}
.navpart-mid span{
	font-size: 36px;
	@include htmlremp(".navpart-mid","span",36px);
	color: #fff;
}
.navpart-right{
	position: absolute;
	top: 0px;
	right: 0px;
	height: 100%;
	width: remp(90px);
}
.navpart-right a{
	display: block;
	height: 100%;
	@include imgremp;
	background-position: remp(-379px) remp(-121px);
}

.userpart{
	height: remp(650px);
	background-color: #f8f8f8;
	.userpart-top{
		text-align: center;
		img{
			width: remp(260px);
			height: remp(260px);
			border-radius: 50%;
			margin-top: remp(100px);
		}
		p{
			font-size: 34px;
			@include htmlremp(".userpart-top","p",34px);
			margin-top: remp(50px);
		}
		span{
			width: remp(70px);
			height: remp(70px);
			display: inline-block;
			position: relative;
			background: $usergreenbtn;
			border-radius: 50%;
			top: remp(-130px);
		}
	}
	.userpart-bot{
		margin-top: remp(30px);
		ul{
			li{
				float: left;
    			height: remp(80px);
    			width: 25%;
    			position: relative;
    			text-align: center;
    			line-height: remp(80px);
				i{
					@include imgremp;
    				position: absolute;
    				top: remp(14px);
    				left: remp(16px);
    				width: remp(56px);
    				height: remp(50px);
    				&.insert-pic{
    					background-position: remp(-390px) remp(4px);
    				}
    				&.insert-bag{
    					background-position: remp(0px) remp(-144px);
    				}
    				&.insert-her{
    					background-position: remp(-200px) remp(-144px);
    				}
    				&.insert-mes{
    					background-position: remp(0px) remp(2px);
    				}
				}
				span{
					font-size: 30px;
					@include htmlremp(".userpart-bot","span",30px);
    				margin-left: remp(20px);
				}
			}
		}
	}
	.sel-line{
		height: remp(20px);
		background: rgba(0,0,0,0.5);
	}
}

.sel-part{
	ul{
		li{
			float: left;
			width: 50%;
			img{
				width: remp(320px);
				height: remp(240px);
			}
		}
	}
}


